<template>
    <div class="box">
        <van-row>
            <!-- 左侧 -->
            <van-col span="6">
                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="(v, i) in list" :title="v.cat_name" :key="i" />
                </van-sidebar>
            </van-col>
            <!-- 右侧 -->
            <van-col span="17">
                <div v-for="(v, i) in list[active]?.children" :key="i">
                    <p>{{ v.cat_name }}</p>
                    <van-grid :border="false" :column-num="4">
                        <van-grid-item v-for="(val, index) in v.children" :key="index">
                            <van-image
                            @click="tosearch(val.cat_name)"
                                :src="val.cat_icon ? val.cat_icon : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'"  />
                            {{ val.cat_name }}
                        </van-grid-item>
                    </van-grid>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { categoriesApi } from '@/api/api'
const active = ref(0);
let list = ref([])
const getlist = () => {
    categoriesApi().then((res) => {
        list.value = res.data.message
    })
}
getlist()
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const tosearch = () =>{
    router.push('/search')
}
</script>

<style lang="scss" scoped></style>